<template>
  <div class="follownewcontent" v-if="items.length > 0">
    <ul
      :style="'width:' + ((items.length + 1) * (49 + 10) + 120) / 23.44 + 'rem'"
    >
      <li>
        <ItemImgHead
          :item="$store.state.user"
          :isBigHead="isBigHead"
          :isAddContent="isAddContent"
        ></ItemImgHead>
      </li>
      <li v-for="(item, index) in items" :key="'follow_' + index">
        <ItemImgHead :item="item" :isBigHead="isBigHead"></ItemImgHead>
      </li>
      <li>
        <router-link
          :to="{
            name: 'MOREFOLLOWNEWCONTENT',
            params: { usid: this.$store.state.user.userId },
          }"
          class="follownewcontent_add"
          :title="this.$t('lang.更多新动态')"
          ><i class="icon-more"></i
        ></router-link>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "FollowNewContent",
  components: {
    ItemImgHead: () =>
      import(
        /* webpackChunkName: "itemImgHead" */ "../../components/common/itemImgHead"
      ),
  },
  data() {
    return {
      items: [],
      isBigHead: true,
      isAddContent: true,
    };
  },
  created() {
    this.items = [
      {
        userId: "0123456",
        userHead:
          "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595233833221&di=8cf8621bb5bdae4844362dfe99c54191&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fbd315c6034a85edf8c1758e240540923dc547553.jpg",
        nickName: "undefined",
        isNewContent: true,
      },
      {
        userId: "0123456",
        userHead:
          "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595233833221&di=8cf8621bb5bdae4844362dfe99c54191&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fbd315c6034a85edf8c1758e240540923dc547553.jpg",
        nickName: "undefined",
        isNewContent: true,
      },
      {
        userId: "0123456",
        userHead:
          "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595233833221&di=8cf8621bb5bdae4844362dfe99c54191&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fbd315c6034a85edf8c1758e240540923dc547553.jpg",
        nickName: "undefined",
        isNewContent: true,
      },
      {
        userId: "0123456",
        userHead:
          "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595233833221&di=8cf8621bb5bdae4844362dfe99c54191&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fbd315c6034a85edf8c1758e240540923dc547553.jpg",
        nickName: "undefined",
        isNewContent: true,
      },
      {
        userId: "0123456",
        userHead:
          "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595233833221&di=8cf8621bb5bdae4844362dfe99c54191&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fbd315c6034a85edf8c1758e240540923dc547553.jpg",
        nickName: "undefined",
        isNewContent: true,
      },
      {
        userId: "0123456",
        userHead:
          "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595233833221&di=8cf8621bb5bdae4844362dfe99c54191&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fbd315c6034a85edf8c1758e240540923dc547553.jpg",
        nickName: "undefined",
        isNewContent: true,
      },
      {
        userId: "0123456",
        userHead:
          "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595233833221&di=8cf8621bb5bdae4844362dfe99c54191&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fbd315c6034a85edf8c1758e240540923dc547553.jpg",
        nickName: "undefined",
        isNewContent: true,
      },
      {
        userId: "0123456",
        userHead:
          "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595233833221&di=8cf8621bb5bdae4844362dfe99c54191&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fbd315c6034a85edf8c1758e240540923dc547553.jpg",
        nickName: "undefined",
        isNewContent: true,
      },
      {
        userId: "0123456",
        userHead:
          "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595233833221&di=8cf8621bb5bdae4844362dfe99c54191&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fbd315c6034a85edf8c1758e240540923dc547553.jpg",
        nickName: "undefined",
        isNewContent: true,
      },
      {
        userId: "0123456",
        userHead:
          "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595233833221&di=8cf8621bb5bdae4844362dfe99c54191&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fbd315c6034a85edf8c1758e240540923dc547553.jpg",
        nickName: "undefined",
        isNewContent: true,
      },
    ];
  },
  methods: {
    addNewContentClickHandle(e) {},
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.follownewcontent {
  width: 100%;
  overflow: scroll;
  overflow-y: hidden;
  padding: 10 / @base;
  ul {
    overflow: hidden;
    display: flex;
    li {
      margin: 0 10 / @base 0 0;
      a {
        &.follownewcontent_add {
          display: block;
          width: 40 / @base;
          margin: 15 / @base 0 0;
          i {
            font-size: 24 / @base;
          }
        }
      }
    }
  }
}
</style>
